<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<html>
	 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">
        <meta charset="UTF-8">
        <meta name="description" content="Violate Responsive Admin Template">
        <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">
        <link href="<%=path %>/assets2/js/bootstrap-table.css" rel="stylesheet">
        <script src="<%=path %>/assets2/js/jquery-1.11.1.min.js"></script>
        <script src="<%=path %>/assets2/js/bootstrap-table.js"></script>
   		<script src="<%=path %>/assets2/js/locale/bootstrap-table-zh-CN.js"></script>
   		<script src="<%=path %>/assets2/js/bootstrap.min.js"></script>
    </head>
<div class="row">
	<ol class="breadcrumb">
		<li><a href="<%=path%>/index"><span
				class="glyphicon glyphicon-home"></span></a></li>
		<li class="active">活动信息管理</li>
	</ol>
</div>

<div class="panel panel-default">
	<div class="panel-heading">活动列表</div>
	<div class="panel-body" id="imgID">
		<form id="formSearch" class="form-horizontal">
			<div class="form-group" style="margin-top: 15px">
				<label class="control-label col-sm-2"
					for="content">活动标题</label>
				<div class="col-sm-2">
					<input type="text" class="form-control" id="content">
				</div>
				<div class="col-sm-1" style="text-align: left;">
					<button type="button" style="margin-left: 50px" id="btn_query"
						class="btn btn-primary" onclick="serachUser()">查询</button>
				</div>
			</div>
		</form>
		<div style="text-align: left;">
			<button type="button" class="btn btn-primary"
				onclick="addActivity()">
				<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增活动行程
			</button>
		</div>
		<button style="float: right; margin-right: 40px; margin-top: -40px"
				onclick="serachUser()" class="btn btn-default" type="button" title="刷新">
				<i class="glyphicon glyphicon-refresh icon-refresh"></i>
		</button>
		<table id="tabId"></table>
	</div>
</div>



<div class="modal fade" tabindex="-1" role="dialog" id="myModal" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 8%;">
<div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			<h4 class="modal-title" id="myModalTitle"></h4>
		</div>
		<div class="modal-body" id="myModalBody" >
			
		</div>
	</div>
</div>
</div>


   <script type="text/javascript">
   $(function () {
	    //1.初始化Table
	    var oTable = new TableInit();
	    oTable.Init();
	    //2.初始化Button的点击事件
	    var oButtonInit = new ButtonInit();
	    oButtonInit.Init();
	});
	var TableInit = function () {
	    var oTableInit = new Object();
	    //初始化Table
	    oTableInit.Init = function () {
	        $('#tabId').bootstrapTable({
	            url: '<%=path %>/liveManager/getActivityInfoList',         //请求后台的URL（*）
	            method: 'get',                      //请求方式（*）
	            toolbar: '#toolbar',                //工具按钮用哪个容器
	            striped: false,                      //是否显示行间隔色
	            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
	            pagination: true,                   //是否显示分页（*）
	            sortable: false,                     //是否启用排序
	            sortOrder: "asc",                   //排序方式
	            queryParams: oTableInit.queryParams,//传递参数（*）
	            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	            pageNumber:1,                       //初始化加载第一页，默认第一页
	            pageSize: 10,                       //每页的记录行数（*）
	            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
	            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
	            strictSearch: false,
	            showColumns: false,                  //是否显示所有的列
	            showRefresh: false,                  //是否显示刷新按钮
	            minimumCountColumns: 2,             //最少允许的列数
	            clickToSelect: false,                //是否启用点击选中行
	            uniqueId: "activityId",                     //每一行的唯一标识，一般为主键列
	            showToggle:false,                    //是否显示详细视图和列表视图的切换按钮
	            cardView: false,                    //是否显示详细视图
	            detailView: false,                   //是否显示父子表
	            columns: [/* {
	            	checkbox: true, // 显示一个勾选框
	                align: 'center', // 居中显示
	                
	            }, */ {
	                field: 'photo',
	                title: '活动照片',
	                width:100,
	                align: 'center', // 左右居中
	                valign: 'middle', // 上下居中
	                formatter:contentImgShow
	            }, {
	                field: 'title',
	                title: '活动标题',
	                width:100,
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            }, {
	                field: 'content',
	                title: '活动内容',
	                width:150,
	                align: 'center', // 左右居中
	                valign: 'middle', // 上下居中
	                formatter:contentShow
	            }, {
	                field: 'activityTime',
	                title: '活动时间',
	                width:300,
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            }, {
	                field: 'activityPlace',
	                title: '活动地点',
	                width:150,
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            }, {
	                field: 'deadline',
	                title: '截止时间',
	                width:100,
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            }, {
	                field: 'maxPeople',
	                title: '报名最多人数',
	                width:100,
	                align: 'center', // 左右居中
	                valign: 'middle' // 上下居中
	            }, {
	                field: 'registrationWay',
	                title: '报名方式',
	                width:100,
	                align: 'center', // 左右居中
	                valign: 'middle', // 上下居中
	                formatter:registrationWayFormatter
	            }, {
	                field: 'state',
	                title: '活动状态',
	                width:100,
	                align: 'center', // 左右居中
	                valign: 'middle', // 上下居中
	                formatter:stateFormatter
	            },{
	                field: 'activityId',
	                title: '  操         作    ',
	                align: 'center', // 左右居中
	                valign: 'middle', // 上下居中
	                formatter: operateFormatter //自定义方法，添加操作按钮
	            }]
	        });
	    };

	//得到查询的参数
// 	, {
//         field: 'name',
//         title: '活动联系人',
//         align: 'center', // 左右居中
//         valign: 'middle' // 上下居中
//     }, {
//         field: 'phone',
//         title: '活动联系人电话',
//         align: 'center', // 左右居中
//         valign: 'middle' // 上下居中
//     }, {
//         field: 'email',
//         title: '活动联系邮箱',
//         align: 'center', // 左右居中
//         valign: 'middle' // 上下居中
//     }
// , {
// 	                field: 'userName',
// 	                title: '活动发起人',
// 	                align: 'center', // 左右居中
// 	                valign: 'middle' // 上下居中
// 	            }
// <marquee></marquee>
	oTableInit.queryParams = function (params) {
	        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
	            limit: params.limit,   //页面大小
	            offset: params.offset,  //页码
	            content: $("#content").val(),
	        };
	        return temp;
	    };
	    return oTableInit;
	};
	//查询
	function serachUser() {
        $("#tabId").bootstrapTable('refresh',{pageNumber:1});
    };
	var ButtonInit = function () {
	    var oInit = new Object();
	    var postdata = {};
	    oInit.Init = function () {
	        //初始化页面上面的按钮事件
	    };
	    return oInit;
	};
	
	//内容多了弹窗口显示
	function contentShow(value, row, index){
		var str= '';
		var htmlStr = '';
		if(value.length>15){
			htmlStr = value.substring(0,15)+'...';
			var did = "content"+row.activityId;
			str = "<span onclick='showNR(\"" +did+ "\")' style='cursor: pointer;'>"+htmlStr+"</span>";
			str +="<input type='hidden' id='content"+row.activityId+"' value='\"" +value+ "\"'>";
		}else{
			str = value;
		}
		return str;
	}
	//layer显示内容
	function showNR(id){
		var did = "#"+id+"";
		var str = $(did).val();
		layer.open({
			  title:"活动内容显示",
			  closeBtn: 1, //不显示关闭按钮
			  anim: 2,
			  shadeClose: true, //开启遮罩关闭
			  type: 1,
// 			  skin: 'layui-layer-rim', //加上边框
			  area: ['800px', '600px'], //宽高
			  content: str
			});
		
	}
	//状态
	function stateFormatter(value, row, index) {
		var str='';
		if(row.state==0){
			str = '无效';
		}else if(row.state==1){
			str = '正常';
		}else if(row.state==2){
			str = '生活管理员关闭';
		}else if(row.state==3){
			str = '论坛管理员关闭';
		}
		return str;
	};
	//报名方式判断
	function registrationWayFormatter(value, row, index){
		var str = '';
		if(value==0){
			str = '网上报名';
		}else if(value==1){
			str = '线下报名';
		}
		return str;
	};
	//操作判断
	function operateFormatter(value, row, index) {
		var str = '';
		if(row.registrationWay==0){
			str = '<span onclick="lookPeopleList('+row.activityId+')" style="cursor: pointer;">报名列表</span>&emsp;&emsp;';
			str += '<span style="cursor: pointer;">预览</span>&emsp;&emsp;';
			str += '<span style="cursor: pointer;" onclick="editActivity('+row.activityId+')">编辑</span>&emsp;&emsp;';
			str += '<span style="cursor: pointer;" onclick="delActivity('+row.activityId+')">删除</span>';
		}else if(row.registrationWay==1){
			str = '<span style="cursor: pointer;">预览</span>&emsp;&emsp;';
			str += '<span style="cursor: pointer;" onclick="editActivity('+row.activityId+')">编辑</span>&emsp;&emsp;';
			str += '<span style="cursor: pointer;" onclick="delActivity('+row.activityId+')">删除</span>';
		}
		return str;
	};
	//照片显示
	function contentImgShow(value, row, index){
		var str = '';
		if(value==null||value==''){
			str = '无照片';
		}else{
			var imgList=new Array();
			imgList = row.photo.split(",");
			if(imgList.length==1){
				str = '<img style="width:100px;height:100px" src="<%=path %>/common/getGoodsPhoto?photoUrl='+imgList+'"></img>';
			}else {
				str = '<span onclick="imgListShow('+row.activityId+')" style="cursor: pointer;">点击查看更多照片</span>';
			}
		}
		return str;
	}
	//照片轮播
	function imgListShow(id){
		$.getJSON('<%=path %>liveManager/getActivityInfoImg?activityId='+id, function(json){
			  layer.photos({
			    photos: json
			    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
			  })
			})
	}
	//添加活动
	function addActivity(){
		var url = "assets2/ueditorMini/addActivity.jsp";
		//iframe窗
		layer.open({
		      type: 2,
		      title: '新增活动行程',
		      shadeClose: true,
		      shade: false,
		      maxmin: true, //开启最大化最小化按钮
		      area: ['893px', '600px'],
		      content: url
		    });
	};
	
	
	//查看报名人员列表
	function lookPeopleList(activityId){
		var url = "jsp/liveManager/joinInfoList.jsp?activityId="+activityId;
		//iframe窗
		layer.open({
		      type: 2,
		      title: '查看报名人员列表',
		      shadeClose: true,
		      shade: false,
		      maxmin: true, //开启最大化最小化按钮
		      area: ['893px', '600px'],
		      content: url
		    });
	};
	
	//编辑活动信息
	function editActivity(activityId){
		var url = "assets2/ueditorMini/editActivity.jsp?activityId="+activityId;
		//iframe窗
		layer.open({
		      type: 2,
		      title: '编辑活动信息行程',
		      shadeClose: true,
		      shade: false,
		      maxmin: true, //开启最大化最小化按钮
		      area: ['893px', '600px'],
		      content: url
		    });
	};
	
	//删除活动
	function delActivity(activityId){
		$.ajax({
			 type:"POST",
			 data: {"activityId":activityId},
	         url: "<%=path %>/liveManager/verifyActivity",
	         success: function(data,status,xhr){
	        	 if(data.num==1){
	        		//询问框
	        			layer.confirm('删除该活动行程~', {
	        			  btn: ['确定','取消'] //按钮
	        			}, function(){
	        				$.ajax({
	        					 type:"POST",
	        					 data: {"activityId":activityId},
	        			         url: "<%=path %>/liveManager/delActivityInfo",
	        			         success: function(data,status,xhr){
	        			        	 if(data.num==1){
	        			 				layer.alert(
	        			                 '删除该活动成功~', 
	        			                 {icon: 1,closeBtn: 0 },
	        			                 function () {
	        			                	 layer.close(layer.index);
	        			                	 $("#tabId").bootstrapTable('refresh');
	        			                 });
	        			 			}else{
	        			 				layer.alert('删除该活动失败~', {
	        			 					  icon: 2,
	        			 					  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
	        			 					});
	        			 			}
	        			         },error:function (){
	        							layer.alert('网络出现了异常~', {
	        								  icon: 8,
	        								  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
	        								});
	        			         }
	        				});
	        			}, function(){
	        				layer.close(layer.index);
	        			});
	 			}else if(data.num==0){
	 				layer.alert('不能删除该活动,活动已有人参与或活动未结束', {
	 					  icon: 2,
	 					  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
	 					});
	 			}else{
	 				layer.alert('网络出现了异常~', {
						  icon: 8,
						  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
						});
	 			}
	         },error:function (){
					layer.alert('网络出现了异常~', {
						  icon: 8,
						  skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
						});
	         }
		});
	};
	
	
   </script>
</html>